<template>
  <div class="readview">
    <div class="read-top">
      <router-link :to="{ path: '/' }">
        <div class="backbox"><img src="../assets/back.png" alt="" /></div>
      </router-link>
      <div class="xiangqing">小说详情</div>
      <router-link :to="{path :'/catelogue',query:{id: id}}">
        <div class="mulu">目录</div>
      </router-link>
    </div>
    <div class="novalbox">
        <div class="imgbox"><img :src="newobj.cover" alt="" /></div>
        <div class="textbox">
          <h3>{{newobj.title}}</h3>
          <div class="zuozhe">作者:<span>{{detailobj.author}}</span></div>
          <div class="itclick"><span>{{detailobj.clicks}}</span></div>
        </div>
      </div>
      <div class="jianjie">
        介绍:<span>{{detailobj.content}}</span>
      </div>
      <div class="pinglunbox">
        <div class="ptop">
          <div class="leftline"></div>
          <div class="tit">评论</div>
        </div>
        <ul class="titlist">
          <li v-for="item in newres" :key="item.commentId">
            <div class="imgbox"><img src="../assets/头像.png" alt=""></div>
            <div class="titright">
              <div class="uname">{{item.nickName}}</div>
              <div class="utime">{{item.time}}</div>
              <div class="pinglun">{{item.comment}}</div>
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { get } from "../http/request";

export default {
  name: "readview",
  data() {
    return {
      id: "",
      newobj: "",
      detailobj:"",
      newres:"",
    };
  },
  methods: {
    // 获取书籍信息
    async getchapter(data) {
      await get(
        `https://apis.netstart.cn/yunyuedu/book/info.json`,data
      ).then((res) => {
        // console.log(res.data.book);
        let maintext = res.data.book;

        // 定义一个对象接收数据
        let obj = {};
        obj.author = maintext.author;
        obj.bookId = maintext.bookId;
        obj.cover = maintext.cover;
        obj.title = maintext.title;
        this.newobj = obj;

        // 调用获取书籍详细-XML
        this.getbookdetail({id:this.newobj.bookId, title:this.newobj.title});
        // 调用获取该书籍的评论
        this.getpinglun({bookId:this.newobj.bookId});
      });
    },
    // 获取书籍详细-XML
    async getbookdetail(data) {
      await get(
        `https://apis.netstart.cn/yunyuedu/book/getsub.json`,data
      ).then((detail) => {
        console.log(detail);
        let detailobj = {};
        // 作者
        detailobj.author = detail.feed.entry.author.name;
        // 简介
        detailobj.content = detail.feed.entry.content.text;
        // 书籍id
        detailobj.id = detail.feed.entry.id;
        // 书籍点击次数
        detailobj.clicks = detail.feed.entry['pris:subscribe'].clicks;
        // 书籍名字
        detailobj.name = detail.feed.entry.title;

        this.detailobj = detailobj
      });
    },
    // 获取评论的数据
    async getpinglun(data){
      await get(
        `https://apis.netstart.cn/yunyuedu/comment/getComments.json`,data
      ).then( data => {
        console.log(data);
        // console.log(data.all.list);
        let pinglunarr = data.all.list;

        let res = pinglunarr.map(element => {
            let chuo = element.time;
            let data = new Date(chuo);
            let Y = data.getFullYear() + '-';
            let M = data.getMonth() + 1 < 10 ? '0' + (data.getMonth() + 1) + '-' : data.getMonth() + 1 + '-';
            let D = data.getDate() < 10 ? '0' + data.getDate()  : data.getDate();
            let h = data.getHours() < 10? '0' + data.getHours() + ':' : data.getHours() + ':';
            let m = data.getMinutes() < 10? '0' + data.getMinutes() + ':' : data.getMinutes() + ':';
            let s = data.getSeconds() < 10? '0' + data.getSeconds() : data.getSeconds();
            // 把时间戳变成年月日时分秒
            let newtimes = Y + M + D +' '+ h + m + s;
            
          return {
            comment:element.comment,
            commentId:element.commentId,
            nickName:element.nickName,
            time:newtimes,
          }
        });
        this.newres = res;
        console.log(this.newres);
      }

      )
    },
    
  },
  created() {
    // 获取传递过来的id
    this.id = this.$route.query.id;

    // 调用函数传递实参id
    this.getchapter({sourceUuid:this.id});

    
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.readview {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  .read-top {
    width: 100%;
    height: 50px;
    background-color: rgb(255, 252, 252);
    display: flex;
    // justify-content: space-between;
    position: relative;
    .backbox {
      width: 50px;
      height: 50px;
      text-align: center;
      img {
        width: 30px;
        height: 30px;
        margin-top: 10px;
      }
    }
    .xiangqing {
      height: 50px;
      text-align: center;
      line-height: 50px;
      position: absolute;
      left: 140px;
      font-size: 20px;
      color: gray;
    }
    .mulu {
      position: absolute;
      right: 10px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      // background-color: aliceblue;
    }
  }
  .novalbox {
    width: 100%;
    padding: 0 10px;
    margin-top: 20px;
    display: flex;
    .imgbox {
      width: 100px;
      height: 150px;
      img {
        width: 100px;
        height: 150px;
      }
    }
    .textbox {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  .jianjie {
    width: 100%;
    padding: 0 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid gainsboro;
  }
  .pinglunbox {
    width: 100%;
    padding: 0 10px;
    .ptop {
      display: flex;
      // justify-content: flex-start;
      width: 100px;
      height: 35px;
      .leftline {
      width: 3px;
      height: 15px;
      margin-top: 10px;
      background-color: gray;
    }
     .tit {
      color: gray;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 25px;
      margin-left: 10px;
    }
    }
    .titlist {
      width: 100%;
      li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .imgbox {
          width: 40px;
          height: 40px;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .titright {
          width: 300px;
          .uname {
            color: skyblue;
            margin-bottom: 5px;
          }
          .utime {
            color: gray;
            margin-bottom: 5px;
          }
        }
      }
    }
  }

}
</style>